<#include "/layout/layout.ftl"/>
<@body>
<script src="/script/tool/KeyValueUtil.js"></script>
    <div class="container-fluid">
        <div class="row">
            <label class="col-md-1">URL地址:</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="interfaceName">
            </div>
        </div>
        <div class="row">
            <label class="col-md-1">Host:</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="host">
            </div>
        </div>
        <div class="row">
            <label class="col-md-1">方法名:</label>
            <div class="col-md-1">
                <select class="form-control" id="interfaceMethod" onchange="switchMethod(this.value)">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                </select>
            </div>
            <label class="col-md-1">超时(秒):</label>
            <div class="col-md-1">
                <select class="form-control" id="timeout">
                    <option value="5000">5</option>
                    <option value="6000">6</option>
                    <option value="7000">7</option>
                    <option value="8000">8</option>
                    <option value="9000">9</option>
                    <option value="10000">10</option>
                </select>
            </div>
            <label class="col-md-1">编码:</label>
            <div class="col-md-1">
                <select class="form-control" id="encoding">
                    <option value="UTF-8">UTF-8</option>
                    <option value="GBK">GBK</option>
                </select>
            </div>
            <input type="button" class="btn btn-primary" id="addHeader" value="增加header" >
            <input type="button" class="btn btn-primary" id="invoke" onclick="invoke()" value="执行调用">
        </div>
        <div class="row">
            <div class="col-md-6"><h4><b>消息头设置</b></h4></div>
        </div>
        <div class="row">
            <table id="headerTable">

            </table>
        </div>
        <div class="row">
            <div class="col-md-6"><h4><b>入参设置</b></h4></div>
        </div>
        <div class="row" id="getParam">
            <div class="col-md-12">
                <input type="button" id ="paramButton"
                       style="margin-left: 2px" class="btn btn-primary" value="新增一行">
                <table id="dataTable">

                </table>
            </div>
        </div>
        <div class="row" id="postParam">
            <div class="col-md-12">
                <textarea style="height: 30%" class="form-control" id="body"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6"><h4><b>返回结果</b></h4></div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <textarea style="height: 80%" class="form-control" id="result"></textarea>
            </div>
        </div>

    </div>
<style>
    .row {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    #dataTable tr:nth-child(even) {
        background: #cccaac;
    }

    .th-inner {
        font-size: medium;
    }
</style>
<script>
    var paramKeyValue;
    var headerKeyValue;
    $(function () {
        paramKeyValue =new KeyValueUtil();
        paramKeyValue.init($("#dataTable"),$("#paramButton"),500);
        headerKeyValue =new KeyValueUtil();
        headerKeyValue.init($("#headerTable"),$("#addHeader"),150);
        $("#postParam").hide();
    });
   function switchMethod (value){
       if(value=="GET"){
           $("#getParam").show();
           $("#postParam").hide();
       }else {
           $("#getParam").hide();
           $("#postParam").show();
       }
   }
    /**
     * 执行调用
     * **/
    function invoke() {
        var url="/http/invoke";
        var interfaceName=$("#interfaceName").val();
        var interfaceMethod=$("#interfaceMethod").val();
        var encoding=$("#encoding").val();
        var timeout =$("#timeout").val();
        var body=$.trim($("#body").val());
        var data = $('#dataTable').bootstrapTable('getData');
        var param = JSON.stringify(data);
        var headerData =$("#headerTable").bootstrapTable("getData");
        var header =JSON.stringify(headerData);
        $.ajax({
            url:url,
            method:"post",
            data:{
                interfaceName:interfaceName,
                interfaceMethod:interfaceMethod,
                encoding:encoding,
                timeout:timeout,
                param:param,
                body:body,
                header:header
            },success:function (result) {
                if(result.success) {
                    $("#result").val(result.data);
                }else {
                    $("#result").val(result.msg);
                }
            }
        })
    }
</script>
</@body>